<template>
	<view class="billdetails" id="billdetails">
		<view class="billdetails_top">
			<view class="name">{{name}}{{address}}</view>
			<view class="moeny">{{Number(userObj.book_money).toFixed(2)}}</view>
			<!-- <view  class="last" >{{userObj.fee_name}}</view> -->
			<view  class="last" v-if="userObj.book_subject == 0">{{userObj.book_types}}</view>
			<view  class="last" v-if="userObj.book_subject == 1">物业费</view>
			<view  class="last" v-if="userObj.book_subject == 2">维修费</view>
			<view  class="last" v-if="userObj.book_subject == 3">公告收益</view>
			<view  class="last" v-if="userObj.book_subject == 4">代扣代缴</view>
			<view  class="last" v-if="userObj.book_subject == 5">押金</view>
			<view  class="last" v-if="userObj.book_subject == 6">工资</view>
			<view  class="last" v-if="userObj.book_subject == 7">社保</view>
			<view class="last" v-if="userObj.book_subject == 8">个税</view>
			<view class="last" v-if="userObj.book_subject == 9">采购</view>
			<view class="last" v-if="userObj.book_subject == 10">设备维保费</view>
			<view class="last" v-if="userObj.book_subject == 11">设备维修费</view>
			<view class="last" v-if="userObj.book_subject == 12">工程材料费</view>
			<view class="last" v-if="userObj.book_subject == 13">其他</view>
		</view>
		<view class="u-p-l-40 u-p-r-40">
			<view class="header-form">
				<view class="header-li">
					<view class="header-name"><h3><span style="color: red;">*</span>发票类型</h3></view>
					<picker  :value="index" @change="invoicetypeBtn" :range="invoiceType" range-key="name" mode="selector">
						<view class="form-select">{{invoiceType[index].name}}</view>
					</picker>
				</view>
				<view class="header-li" >
					<view class="header-name"><h3><span style="color: red;">*</span>抬头类型</h3></view>
					<picker :value="indexs" @change="headuptypeBtn" :range="headuptype" range-key="name" mode="selector">
						<view class="form-select">{{headuptype[indexs].name}}</view>
					</picker>
				</view>
				<view >
					<view class="header-li">
						<view class="header-name"><h3><span style="color: red;">*</span>抬头</h3></view>
						<textarea placeholder="请输入单位名称或个人名称" v-model="particulars.rise" class="text-area"></textarea>
					</view>
					<view class="header-li">
						<view class="header-name"><h3><span style="color: red;">*</span>纳税人识别码</h3></view>
						<textarea placeholder="请输入纳税人识别码" type='number' v-model="particulars.taxpayer_identification_code"  class="text-area"></textarea>
					</view>
					<view class="header-li">
						<view class="header-name"><h3>地址</h3></view>
						<textarea placeholder="请输入单位注册地址" v-model="particulars.rise_address" class="text-area"></textarea>
					</view>
					<view class="header-li">
						<view class="header-name"><h3>电话</h3></view>
						<textarea placeholder="请输入单位电话" v-model="particulars.rise_telephone" class="text-area"></textarea>
					</view>
					<view class="header-li">
						<view class="header-name"><h3>开户行</h3></view>
						<textarea placeholder="请输入开户行" v-model="particulars.bank_of_deposit" class="text-area"></textarea>
					</view>
					<view class="header-li">
						<view class="header-name"><h3>账号</h3></view>
						<textarea placeholder="请输入开户行账号" v-model="particulars.account_number" class="text-area"></textarea>
					</view>
					<view class="header-li">
						<view class="header-name"><h3>备注</h3></view>
						<textarea placeholder="请输入备注信息" v-model="particulars.invoice_remarks" class="text-area"></textarea>
					</view>
					
					<!-- <view style="color: #11A9EC;margin-top: 10px;text-align: center;" @click="seefllowClick()">
						<span  >
							{{this.isEndPage==false?'展开':'收起'}}
						</span>
					</view> -->
				</view>	
			</view>
		</view>
		<view style="border-bottom: 16rpx solid #F4F4F4;"></view>
		<view class="u-p-l-30 u-p-r-30">
			<view class="header-form">
				<view class="header-li">
					<view class="header-name"><h3><span style="color: red;">*</span>取票方式</h3></view>
					<picker :value="indexe" @change="ticketmethodBtn" :range="ticketmethod" range-key="name" mode="selector">
						<view class="form-select">{{ticketmethod[indexe].name}}</view>
					</picker>
				</view>
				<view class="header-li" v-if="particulars.ticket_collection_method != 3">
					<view class="header-name"><h3><span style="color: red;">*</span>姓名</h3></view>
					<textarea placeholder="请输入收件人姓名" v-model="particulars.ticket_collector_name" class="text-area"></textarea>
				</view>
				<view class="header-li" v-if="particulars.ticket_collection_method != 3">
					<view class="header-name"><h3><span style="color: red;">*</span>电话</h3></view>
					<textarea placeholder="请输入收件人电话" v-model="particulars.ticket_collector_phone" class="text-area"></textarea>
				</view>
				<view v-if="particulars.ticket_collection_method == 2">
					<view @click="searchAdd" class="header-li" style="color: #333;">
						<view class="header-name"><h3><span style="color: red;">*</span>选择省市区</h3></view>
						<view class="form-select">{{addressName ? addressName:'请选择'}}</view>
					</view>
				</view>
				<view class="header-li" v-if="particulars.ticket_collection_method == 2">
					<view class="header-name"><h3><span style="color: red;">*</span>详细地址</h3></view>
					<textarea placeholder="请输入收件人地址" v-model="particulars.detailed_address" class="text-area"></textarea>
				</view>
				<view class="header-li" v-if="particulars.ticket_collection_method == 3">
					<view class="header-name"><h3><span style="color: red;">*</span>邮箱</h3></view>
					<textarea placeholder="请输入接收邮箱" v-model="particulars.ticket_collector_email" class="text-area"></textarea>
				</view>
			</view>
			<view>
				<lb-picker :list='list' :level='3' mode='multiSelector' :props="myProps" v-model="addressList" ref="addRef"></lb-picker>
			</view>
		</view>
		<view class="bill-deta-btn">
			<button class="yilingqu" @click="handleInvoice" >确认提交</button>
		</view>
		
		<view class="modal" v-if="userFeedbackHidden">
			<view class="modal-cont">
				<view class="modal-title">申请开票成功</view>
				<view style="margin-top: 15px;">
					<view>申请开票成功，请在已开票列表查看！</view>
				</view>
				<view class="modal-bottom">
					
					<view class="btn-sure" @click="handleIs">确定</view>
				</view>
			</view>
		</view>
		
		<view class="modal" v-if="invoicingFlg" >
			<view class="modal-cont">
				<view class="modal-title">提示</view>
				<view>
					<view>该公司还没有设置开票！</view>
				</view>
				<view class="modal-bottom">
					
					<view class="btn-sure" @click="handleIs">确定</view>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	import LbPicker from '@/components/lb-picker'
	export default {
		data() {
			return {
				userFeedbackHidden:false,
				name:'',
				address:'',
				particulars: {
					invoice_type:1,//发票类型 1、增值税普通发票（纸质发票），2、增值税专用发票（纸质发票）,3、增值税普通发票（电子版），4、增值税专用发票（电子版）
					head_up_type:null,//抬头类型 1、个人，2、企业
					rise:null,//抬头
					taxpayer_identification_code:null,//纳税人识别码
					rise_address:null,//地址
					rise_telephone:null,//电话
					bank_of_deposit:null,//开户行
					account_number:null,//账号
					invoice_remarks:null,//备注
					ticket_collection_method:null,//取票方式 1、自取，2、快递，3、邮箱
					ticket_collector_name:null,//姓名
					ticket_collector_phone:null,//电话
					//省市区
					detailed_address:null,//详细地址
					ticket_collector_email:null,//邮箱
					owner_id:uni.getStorageSync('projectItem').ownerId,
					amount_of_money:null,//金额
					fee_name:null,//缴费类型
					fee_id:null,
					code:null,
					// org_id
				},
				//发票类型
				index:0,
				invoiceType:[],
				tableInvoice:[],
				renovation:[
					{
						id:0,
						name:'请选择'
					},
					{
						id:1,
						name:'增值税普通发票（纸质发票）'
					},
					{
						id:2,
						name:'增值税专用发票（纸质发票）'
					},
					{
						id:3,
						name:'增值税普通发票（电子版）'
					},
					{
						id:4,
						name:'增值税专用发票（电子版）'
					}
				],
				//抬头类型
				indexs:0,
				headuptype:[
					{
						id:0,
						name:'请选择'
					},
					{
						id:1,
						name:'个人'
					},
					{
						id:2,
						name:'企业'
					}
				],
				//取票方式
				indexe:0,
				ticketmethod:[
					{
						id:0,
						name:'请选择'
					},
					{
						id:1,
						name:'自取'
					},
					{
						id:2,
						name:'快递'
					},
					{
						id:3,
						name:'邮箱'
					}
				],
				list: [],
				addressList: [],
				addressName: '',
				myProps: {
					label: 'name',
					value: 'id',
					children: 'child'
				},
				searchFlag: true,
				addressSqList: [],
				userObj:{},
				isEndPage:true,
				dataList:{},
				invoicingFlg:false,
				againObj:{},
			}
		},
		onLoad(options) {
			this.userObj = JSON.parse(decodeURIComponent(options.item));
			this.againObj = this.userObj
			console.log(this.againObj)
		},
		created() {
		
			this.getAddress()
		},
		watch: {
			addressList(val) {
				this.idGetName()
				// this.getProList()
			},
		},
		onShow() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			this.name = this.homelist.proName;
			this.address = this.homelist.buildDistrictCode + '-' + this.homelist.buildTowerCode + '-' + this.homelist
							.roomUnitNumber +
					'-' + this.homelist.roomCode
			this.money = this.$Route.query.money
			this.chooseList = this.$Route.query.chooseList
			// this.getBillDetail()
			this.getInvoice()
			this.getAddress()
			
		},
		
		methods: {
			//选择发票类型
			getInvoice(){
				this.invoiceType = []
				this.$request.api.getInvoiceType({
					room_id:uni.getStorageSync('projectItem').roomId,
				}).then(res=>{
					if(res.data.code == 400){
						this.invoicingFlg = true
					}else{
						this.tableInvoice = res.data.data.datalist
						console.log(this.tableInvoice)
						if(this.tableInvoice.length>0){
							for(let i=0;i<this.tableInvoice.length;i++){
								let obj = {
									id:this.tableInvoice[i].id,
									name:this.tableInvoice[i].name
								}
								this.invoiceType.push(obj);
							}
						}
					}
				})
			},
			invoicetypeBtn:function(e){
				
				this.index = e.detail.value
				// let invoiceType = this.invoiceType[this.index].id;
				this.particulars.invoice_type = this.invoiceType[this.index].id
				console.log(this.particulars.invoice_type,'++++++')
				
				
				// let details = {}
				// for(let i = 0;i<this.tableInvoice.length;i++){
				// 	if(this.tableInvoice[i].id === this.particulars.invoice_type){
				// 		details = this.tableInvoice[i];
				// 	}
				// }
				
				
				// this.particulars.invoice_type = this.renovation[this.index].id
				// this.index = e.detail.value
				// let buildId = this.dataList[this.index].id;
				// let details = {}
				// for(let i = 0;i<this.dataList.length;i++){
				// 	if(this.dataList[i].id === buildId){
				// 		details = this.dataList[i];
				// 	}
				// }
			},
			//选择抬头类型
			headuptypeBtn:function(e){
				this.indexs = e.target.value
				this.particulars.head_up_type = this.headuptype[this.indexs].id
			},
			//选择取票方式
			ticketmethodBtn:function(e){
				this.indexe = e.target.value
				this.particulars.ticket_collection_method = this.ticketmethod[this.indexe].id
			},
			// 获取地址数据
			async getAddress() {
				console.log(1)
				let res = await this.$request.api.address({})
				console.log(res)
				this.list = res.data.data.data || res.data.data
				// console.log(this.list)
				console.log(333)
			},
			// 根据地址Id  获取名
			idGetName() {
				this.addressName = ''
				if (this.addressList) {
					for (let item of this.list) {
						if (item.id == this.addressList[0]) {
							this.addressName += item.name
							if (this.addressList.length > 1) {
								for (let sitem of item.child) {
									if (sitem.id == this.addressList[1]) {
										this.addressName += sitem.name
										if (this.addressList.length > 2) {
											for (let qitem of sitem.child) {
												if (qitem.id == this.addressList[2]) {
													this.addressName += qitem.name
												}
											}
										}
									}
								}
							}
						}
					}
				}
			},
			// 点击选择地址按钮
			searchAdd() {
				this.$refs.addRef.show();
			},
			//确认提交
			handleInvoice(){
				console.log(this.particulars)
				// if(this.particulars.invoice_type != null){
				// 	uni.showToast({
				// 	  title: '请选择发票类型',
				// 	  duration: 2000,
				// 	  icon: 'none'
				// 	});
				// 	return;
				// }
				// if(this.particulars.head_up_type != null){
				// 	uni.showToast({
				// 	  title: '请选择抬头类型',
				// 	  duration: 2000,
				// 	  icon: 'none'
				// 	});
				// 	return;
				// }
				// if(this.particulars.rise != null){
				// 	uni.showToast({
				// 	  title: '请输入抬头',
				// 	  duration: 2000,
				// 	  icon: 'none'
				// 	});
				// 	return;
				// }
				// if(this.particulars.taxpayer_identification_code != null){
				// 	uni.showToast({
				// 	  title: '请输入纳税人识别码',
				// 	  duration: 2000,
				// 	  icon: 'none'
				// 	});
				// 	return;
				// }
				// if(this.particulars.ticket_collection_method != null){
				// 	uni.showToast({
				// 	  title: '请输选择取票方式',
				// 	  duration: 2000,
				// 	  icon: 'none'
				// 	});
				// 	return;
				// }
				this.addressList.forEach(item => {
					if (item.id == this.addressList[0]) {
						this.addressName += item.name
					}
				});
				 this.particulars.detailed_address = this.addressName + this.particulars.detailed_address;
				console.log(this.particulars.detailed_address)
				this.particulars.amount_of_money = this.userObj.book_money 
				this.particulars.fee_name = this.userObj.book_subject
				this.particulars.fee_id = this.userObj.book_id
				this.particulars.code = this.userObj.book_code
				if(this.userObj.book_subject == 1){
					this.particulars.fee_name = '物业费'
				}else if(this.userObj.book_subject == 2){
					this.particulars.fee_name = '维修费'
				}else if(this.userObj.book_subject == 3){
					this.particulars.fee_name = '公告收益'
				}else if(this.userObj.book_subject == 4){
					this.particulars.fee_name = '代扣代缴'
				}else if(this.userObj.book_subject == 5){
					this.particulars.fee_name = '押金'
				}else if(this.userObj.book_subject == 6){
					this.particulars.fee_name = '工资'
				}else if(this.userObj.book_subject == 7){
					this.particulars.fee_name = '社保'
				}else if(this.userObj.book_subject == 8){
					this.particulars.fee_name = '个税'
				}else if(this.userObj.book_subject == 9){
					this.particulars.fee_name = '采购'
				}else if(this.userObj.book_subject == 10){
					this.particulars.fee_name = '设备维保费'
				}else if(this.userObj.book_subject == 11){
					this.particulars.fee_name = '设备维修费'
				}else if(this.userObj.book_subject == 12){
					this.particulars.fee_name = '工程材料款'
				}else if(this.userObj.book_subject == 13){
					this.particulars.fee_name = '其他'
				}
				this.$request.api.gethandleInvoice(this.particulars).then(res=>{
					if(res.data.code == 0){
						this.userFeedbackHidden = true
					}else{
						uni.showToast({
						  title: res.data.msg,
						  duration: 2000,
						  icon: 'none'
						});
					}
				},
				err => {
					this.loading = true;
					uni.showToast({
						title: err.errorMessage,
						duration: 2000,
						icon: 'none'
					});
					return;
				})
			},
			//点击跳转账单页
			handleIs() {
				uni.navigateTo({
					url: '/homePage1/bill/bill'
				})
			},
			
		}
	}
</script>

<style scoped lang="scss" scoped>
	#billdetails{
	.billdetails {
		padding: 0 30rpx;
	}
	.billdetails_top {
		// height: 312rpx;
		text-align: center;
		background-color: #fff;
		// margin-top: 60rpx;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		border-bottom: 16rpx solid #F4F4F4;
		padding: 40rpx 0;

		.name {
			// padding-top: 60rpx;
			box-sizing: border-box;
			font-size: 36rpx;
			font-weight: 550;

		}
		.last {
			margin-top: 10px;
			color: #2b85e4;
			font-size: 17px;
			font-weight: 550;
		}
		.moeny {
			font-size: 48rpx;
			color: #000;
			font-weight: bold;
			margin-top: 48rpx;
		}
	}

	.xian {
		height: 50rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;

		.xian_center {
			height: 1px;
			border-top: 1px dashed #ccc;
			margin: 25rpx 40rpx;
			width: 600rpx;

		}
		.xian_left {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			float: left;
			background-color: rgb(244, 244, 244);
			margin-left: -7vw;
		}
		.xian_right {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			float: right;
			background-color: rgb(244, 244, 244);
			margin-right: -7vw;

		}
	}
	.zdbh {
		margin-bottom: 30rpx;
		.bh {
			float: left;
		}
		.num {
			float: right;
		}
	}
	.wyf {
		.wyfname {
			float: left;
		}
		.wyfmoney {
			float: right;
		}
		.view {
			margin-bottom: 30rpx;
		}
	}
	.main_jh {
		margin-bottom: 60rpx;
	}
	.main {
		background-color: #fff;
		padding: 60rpx 20rpx;
	}
	.bill-deta-btn {
		width: 100%;
		padding: 25px 0;
		.pay{
			background: #ff9900 !important;
			color: #fff;
		}
		.yilingqu{
			width: 80%;
			height: 84rpx;
			// background:#F9A832;
			// background-color: #F9A832;
			background: linear-gradient(180deg, #76D904 0%,#417505 100%);
			border-radius: 44rpx;
			line-height: 84rpx;
			color: #FFFFFF;
			text-align: center;
			font-size: 32rpx;
		}
	}
	.alipay{
		margin-top: 50rpx;
	}
	.header-form{
		margin-top: 10rpx;
		background: #FFFFFF;
		.header-li{
			// padding:0 45rpx;
			display: flex;
			// align-items: center;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 95rpx;
			color: #333333;
			border-bottom:1rpx solid #EEEEEE;
			.header-name{
				width: 200rpx;
				h3{
					font-size: 14px;
				}
			}
			.text-area{
				width: 420rpx;
				padding-top: 26rpx;
				height: 60rpx;
			}
		}
	}
	.modal {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;
	}
	.modal-cont {
		width: 610rpx;
		// min-height: 420rpx;
		background: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.modal-icon {
		width: 80rpx;
		height: 80rpx;
		margin-top: 67rpx;
	}
	.modal-title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 45rpx;
		margin-top: 22rpx;
	}
	.modal-bottom {
		width: 100%;
		height: 84rpx;
		border-top: 1rpx solid #e6e9ed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50rpx;
	}
	.btn-cancel {
		width: 50%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		border-right: 1rpx solid #d8d8d8;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
	}
	.btn-cancel1 {
		width: 100%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		/* border-right: 1rpx solid #d8d8d8; */
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
	}
	
	.btn-sure {
		width: 100%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #578ef0;
	}
		
}
#billdetails .header-form .header-li .text-area[data-v-639141e8] {
    width: 210px;
    padding-top: 13px;
    height: 30px;
    font-size: 13px;
}
</style>
